<template>
	<view :class="[primarySize()]">
		<view class="container">

			<view class="pb30">
				<view style="padding-top: 32rpx;">
					<view class="list" v-if="list.length">
						<view @click="goDetail(item)" class="item" v-for="item in list" :key="item.id">
							<view class="item-1">
								<image class="img" :src="item.logo_image" mode="aspectFill"></image>
								<view class="item-1-left">
									<view class="name">{{item.name}}</view>
									<view class="item-1-left-1">
										<view class="br-1">{{item.company_properties.name}}</view>
										<view class="br-2">{{item.industry_category.name}}</view>
										<view class="br-3">{{item.company_scale.name}}</view>
									</view>
								</view>
							</view>
							<view class="item-2">
								<view class="fabu">发布{{item.job_total}}个岗位</view>
								<view class="item-arrow">
									<view>企业详情</view>
									<image src="/static/public/right.png" mode=""></image>
								</view>
							</view>
							<view class="item-3">
								<view class="tag" v-for="v in item.jobs" :key="v.id">{{v.title}}</view>
							</view>
							<view class="item-4">
								<image src="/static/public/address.png" mode=""></image>
								<view class="address">企业地址：{{item.address}}</view>
							</view>
						</view>
					</view>
					<view class="nothing" v-else>
						<image src="@/static/public/icon_nothing.png" mode="aspectFill"></image>
						<text>抱歉，暂无相关信息</text>
					</view>
					<uni-load-more v-if="params.page!=1&&loadingMore" status="loading"></uni-load-more>
					<uni-load-more v-if="params.page!=1&&list.length==total" status="noMore"></uni-load-more>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	const app = getApp();
	export default {
		data() {
			return {
				job_type: 0,
				list: [],
				params: {
					page: 1,
					limit: 10,
				},
				total: 0,
				query: {},
				loadingMore: false,
				id: ''
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad({
			id
		}) {
			this.id = id
			this.fetch()
		},
		onReachBottom() {
			if (this.list.length >= this.total) return
			this.loadingMore = true
			this.params.page += 1
			this.fetch()
		},
		methods: {
			fetch() {
				this.$core.get({
					url: 'xilujob.third/getLiveCompanyList',
					loading: true,
					data: {
						id: this.id,
						page: this.params.page,
						limit:10
					},
					success: ret => {
						this.list.push(...ret.data.list)
						this.total = ret.data.total
						this.loadingMore = false
					}
				});
			},
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/enterprise/live_enterprise_detail?id=' + item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pt88 {
		padding-top: 88rpx;
	}

	.container {
		padding: 32rpx;
		background: #F3F3F3;
	}

	.list {
		.item {
			position: relative;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;
			margin-bottom: 26rpx;
			padding: 32rpx;

			.item-1 {
				display: flex;

				.img {
					width: 84rpx;
					height: 84rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-right: 24rpx;
				}

				.item-1-left {
					display: flex;
					flex-direction: column;

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 700;
						font-size: 28rpx;
						color: #333333;
					}

					.item-1-left-1 {
						display: flex;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #AAAAAA;

						.br-1 {
							padding-right: 16rpx;
							position: relative;

							&::after {
								position: absolute;
								content: '';
								height: 50%;
								width: 1rpx;
								background-color: #E5E5E5;
								right: 0;
								top: 50%;
								transform: translateY(-50%);

							}

						}

						.br-2 {
							padding: 0 16rpx;
							position: relative;

							&::after {
								position: absolute;
								content: '';
								height: 50%;
								width: 1rpx;
								background-color: #E5E5E5;
								right: 0;
								top: 50%;
								transform: translateY(-50%);

							}
						}

						.br-3 {
							padding-left: 16rpx;
						}
					}
				}
			}

			.item-2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 32rpx;

				.fabu {
					font-family: PingFang SC, PingFang SC;
					font-weight: 700;
					font-size: 28rpx;
					color: #333333;
				}

				.item-arrow {
					display: flex;
					align-items: center;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #A0A0A0;
					margin-right: 8rpx;

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.item-3 {
				display: flex;
				margin-top: 16rpx;
				padding-bottom: 12rpx;
				border-bottom: 1rpx solid #EDEDED;
				flex-wrap: wrap;

				.tag {
					padding: 16rpx 20rpx;
					background: #EBF5FF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #0D8AFF;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
				}
			}

			.item-4 {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				.address {
					margin-left: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #717171;
					flex: 1;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>